"use client";
import { useLayoutEffect, useState } from "react";
import type { FC } from "react";
import {
  DragDropContext,
  Draggable,
  Droppable,
  resetServerContext,
} from "@hello-pangea/dnd";
import contentStyle from "../../index.module.scss";
import { usePersonalDetailsStore, useStore } from "@/store";
import { reorder } from "@/app/utils";
import { updatePersonalDetail } from "@/service";
import PersonalIcon from "@/cvcomponents/Icon/personalIcon";

interface IndexProps {}
function getListStyle(isDraggingOver: boolean) {
  return {
    // background: isDraggingOver ? 'lightblue' : 'lightgrey',
    // padding: grid,
    width: "100%",
    padding: "15px 10px",
    overflow: "auto",
    display: "flex",
    whiteSpace: "nowrap",
  };
}
function getItemStyle(isDragging: boolean, draggableStyle: any) {
  return {
    background: isDragging ? "rgb(233, 242, 253)" : "rgb(229, 229, 229)",
    borderRadius: "50%",
    width: "36px",
    height: "36px",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    marginRight: "10px",
    cursor: "pointer",
    overflow: "hidden",
    flex: "0 0 36px",
    ...draggableStyle,
  };
}

const Index: FC<IndexProps> = () => {
  const { updateDetailOrder, personalDetails } = usePersonalDetailsStore(
    (state) => state,
    (o, n) => {
      return o.personalDetails === n.personalDetails;
    }
  );

  const [items, setItems] = useState<any[]>([]);
  useLayoutEffect(() => {
    setItems(
      personalDetails.detailsOrder?.filter(
        (item) => item !== "name" && item !== "expJob" && personalDetails[item]
      ) || []
    );
  }, [personalDetails]);

  const onDragEnd = async (result: any) => {
    const { source, destination } = result;
    if (!destination) return;
    if (source.droppableId === destination.droppableId) {
      if (result.destination.index === result.source.index) {
        return;
      }
      const list = reorder(items, source.index, destination.index);
      if (source.droppableId === "droppable") {
        updateDetailOrder(list);
        if (personalDetails.id) {
          updatePersonalDetail({
            id: personalDetails.id,
            detailsOrder: ["name", "expJob", ...list],
          });
        }
      }
    }
  };
  return (
    <div>
      <h1 className={contentStyle.subtitle} style={{ margin: "30px 0 10px" }}>
        个人信息顺序调整（可拖动排序）
      </h1>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="droppable" direction="horizontal">
          {(provided, snapshot) => {
            return (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
              >
                {items.map((item, index) => {
                  return (
                    <Draggable key={item} draggableId={item} index={index}>
                      {(provided, snapshot) => {
                        return (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            style={getItemStyle(
                              snapshot.isDragging,
                              provided.draggableProps.style
                            )}
                          >
                            <div>
                              <PersonalIcon
                                name={item}
                                style={{ width: "20px", color: "gray" }}
                              ></PersonalIcon>
                            </div>
                          </div>
                        );
                      }}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </div>
            );
          }}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default Index;
